
;(function(win,doc){
	var oImgList = doc.getElementsByClassName('J_imgList')[0],
		data = JSON.parse(doc.getElementById('J_data').innerHTML),
		imgTpl = doc.getElementById('J_imgTpl').innerHTML
				
		oImgs = doc.getElementsByClassName('list-img')
		
		var init= function(){
			
			oImgList.innerHTML=renderList(data)
			bindEvent()
			setTimeout(function(){
				window.scrollTo(0,0)
			},150)
			
		}
		function bindEvent(){
			window.onload = window.onscroll = throttle(imgLazyLoad(oImgs),800)			
		}
		function renderList(data){
			var list=''
			data.forEach(function(elem){
				list += imgTpl.replace(/{{(.*?)}}/g, function(node, key){
					return {
						img: elem.img,
						name: elem.name
					}[key]
				})
			})
			
			return list
		}
		
		init()
	
	
})(window, document)
function imgLazyLoad(image){	
	var imgLen = image.length	
	
	return function(){
		var cHeight = document.documentElement.clientHeight,
		    sTop =document.documentElement.scrollTop || document.body.scrollTop,
			imgItem,
			n=0;		
			
		for (var i=n; i<imgLen; i++){
				imgItem =image[i]					
			if (imgItem.offsetTop < cHeight + sTop){
				imgItem.src=imgItem.getAttribute('data-src')
				//imgItem.removeAttribute('data-src')				
				n++
			}
		}
	}
}
//时间戳方案
function throttle(fn,wait){
    var pre = Date.now();
    return function(){
        var context = this;
        var args = arguments;		
        var now = Date.now();
        if( now - pre >= wait){
            fn.apply(context,args);
            pre = Date.now();
        }
    }
}

// 定时器方案
function throttle2(fn,wait){
    var timer = null;
    return function(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                fn.apply(context,args);
                timer = null;
            },wait)
        }
    }
}